<div class="modal-dialog modal-lg" role="document" id="threadStackTraceDialog">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" aria-label="Close"><i class="icon-cancel"></i></button>
            <h2 class="modal-title">
                <i class="icon-thread-stack-trace"></i>
                <span>Stack Trace</span>
            </h2>
        </div>
        <div class="modal-body">
            <div class="form flex-form margin-top">
                <div class="form-group">
                    <label class="control-label" for="threadId">Thread ID:</label>
                    <div class="form-control-static" id="threadId"><strong data-bind="text: threadId"></strong></div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="threadName">Thread Name:</label>
                    <div class="form-control-static" id="threadName"><strong data-bind="text: threadName"></strong></div>
                </div>
                <div class="form-group" data-bind="if: threadType() && threadType() !== 'Other' && isThreadAlive()">
                    <label class="control-label" for="threadType">Thread Type:</label>
                    <div class="form-control-static" id="threadType"><strong data-bind="text: threadType"></strong></div>
                </div>
                <div class="form-group" data-bind="if: isThreadAlive">
                    <label class="control-label" for="cpu">CPU Usage:</label>
                    <div class="form-control-static" id="cpu"><strong data-bind="text: cpuUsage"></strong></div>
                </div>
                <div class="form-group" data-bind="if: isThreadAlive">
                    <label class="control-label" for="stack">Stack Trace:</label>
                    <div class="form-control-static" id="stack">
                        <i class="margin-left" data-bind="visible: spinners.loading(), css: { 'btn-spinner': spinners.loading() }"></i>
                        <small class="margin-left margin-left-xs"><strong data-bind="if: !stackTrace().length && !spinners.loading()">N/A</strong></small>
                    </div>
                </div>
                <div class="panel padding">
                    <div class="padding padding-xs text-center text-warning bg-warning margin-top margin-bottom margin-left margin-right"
                         data-bind="visible: !isThreadAlive() && !spinners.loading()">
                        <i class="icon-warning"></i><span>Thread is no longer alive</span>
                    </div>
                    <div class="text-center padding" data-bind="visible: spinners.loading(), css: { 'btn-spinner': spinners.loading }">
                        <span>Loading</span>
                    </div>
                    <div class="padding" data-bind="css: { panel: stackTrace().length }, visible: isThreadAlive">
                        <div class="text-nowrap stack-trace">
                            <div class="padding padding-xs" data-bind="visible: stackTrace().length">
                                <!-- ko foreach: stackTrace -->
                                <small data-bind="visible: !$parent.isUserCode($data)"><span data-bind="text: $data"></span><br></small>
                                <small data-bind="visible: $parent.isUserCode($data)"><strong data-bind="text: $data"></strong><br></small>
                                <!-- /ko -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer margin-bottom">
            <button class="btn btn-default" data-bind="click: close">
                <i class="icon-cancel"></i><span>Cancel</span>
            </button>
            <button class="btn btn-default" data-bind="click: copyStackTrace, enable: stackTrace().length" title="Copy stack trace to clipboard">
                <i class="icon-copy-to-clipboard"></i><span>Copy</span>
            </button>
            <button class="btn btn-primary" data-bind="click: refreshStackTrace, enable: !spinners.loading(), css: { 'btn-spinner': spinners.loading }" title="Click to refresh stack trace">
                <i class="icon-refresh"></i><span>Refresh</span>
            </button>
        </div>
    </div>
</div>
